<template>
    <div class="cur-card zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-items-center zs-layout-justify-between">
        <div class="zs-tabs">
            <template v-if="props.tabList && props.tabList.length > 0">
                <div class="zs-tab" :class="{ 'zs-tab-active': index == props.curTabIndex }"
                    v-for="(item, index) in props.tabList" :key="index" @click="change(index)"
                    v-btnPermi="{ permi: item.permi, isHiden: true }">{{ item.label }}</div>
            </template>
        </div>
        <div class="db-tag-gray" v-if="props.tag">{{ props.tag }}</div>
    </div>
</template>

<script setup>

const props = defineProps({
    curTabIndex: {
        type: Number,
        required: false,
        default: 0
    },
    tabList: {
        type: Array,
        required: false,
    },
    tag: {
        type: String,
        required: false,
        default: ''
    }
})
const emit = defineEmits(["onChange"]);
const change = (data) => {
    emit("onChange", { data: data });
}

</script>

<style scoped lang="scss">
.cur-card {
    height: 48px;
    box-sizing: border-box;
}
.base-card-img {
    max-width: 100%;
    width: 100%;
    border-radius: 4px;
}
</style>
